<template>
    <view class="lg-con boxH">
        <header-vue bgColor="transparent" class="headerH"></header-vue>
        <!-- 切换导航栏 -->
        <view class="nav-container navH">
            <view class="nav-bg" :class="{lr: currentTab == 1}">
                <view class="nav-slider"></view>
                <view 
                    class="nav-item" 
                    :class="{ active: currentTab === 0 }"
                    @click="switchTab(0)"
                >
                    邻工发布
                </view>
                <view 
                    class="nav-item" 
                    :class="{ active: currentTab === 1 }"
                    @click="switchTab(1)"
                >
                    接单大厅
                </view>
            </view>
        </view>
        <!-- 消息 -->
        <view class="news-bar" v-if="currentTab === 0">
            <view class="news-content">
                <u-icon name="bell-fill" color="#0785CF" size="32rpx"></u-icon>
                <text class="news-text">当前有0个需求进行中...</text>
            </view>
        </view>
        <!-- 内容 -->
        <view class="content-container">
            <!-- 邻工发布 -->
            <view v-if="currentTab === 0" class="publish-content">
                <!-- 代取 -->
                <view class="category-section">
                    <view class="category-title">
                        <view class="title-bar"></view>
                        <text class="title-text">代取</text>
                    </view>
                    <view class="service-grid">
                        <view class="service-card pickup-card" @click="selectService(101,'取外卖')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg1.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">取外卖</text>
                            </view>
                        </view>
                        <view class="service-card pickup-card" @click="selectService(102,'取快递')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg2.png'"  width="332rpx" height="160rpx" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">取快递</text>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 代买和代送 -->
                <view class="flex between">
                    <view class="category-section">
                        <view class="category-title">
                            <view class="title-bar"></view>
                            <text class="title-text">代买</text>
                        </view>
                        <view class="service-grid">
                            <view class="service-card purchase-card" @click="selectService(103,'代买商品')">
                                <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg3.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                                <view class="card-content">
                                    <text class="card-text">代买商品</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    
                    <view class="category-section">
                        <view class="category-title">
                            <view class="title-bar"></view>
                            <text class="title-text">代送</text>
                        </view>
                        <view class="service-grid">
                            <view class="service-card delivery-card" @click="selectService(104,'代送')">
                                <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg4.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                                <view class="card-content">
                                    <text class="card-text">代送</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 代办 -->
                <view class="category-section">
                    <view class="category-title">
                        <view class="title-bar"></view>
                        <text class="title-text">代办</text>
                    </view>
                    <view class="service-grid">
                        <view class="service-card errand-card" @click="selectService(105,'宠物喂养')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg5.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">宠物喂养</text>
                            </view>
                        </view>
                        <view class="service-card errand-card" @click="selectService(105,'宠物帮遛')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg6.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">宠物帮遛</text>
                            </view>
                        </view>
                        <view class="service-card errand-card" @click="selectService(106,'衣物干洗')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg7.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">衣服干洗</text>
                            </view>
                        </view>
                        <view class="service-card errand-card" @click="selectService(107,'家庭快修')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg8.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">家庭快修</text>
                            </view>
                        </view>
                        <view class="service-card errand-card" @click="selectService(108,'陪护作业')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg9.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">陪护作业</text>
                            </view>
                        </view>
                        <view class="service-card errand-card" @click="selectService(109,'到家家教')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg10.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">到家家教</text>
                            </view>
                        </view>
                        <view class="service-card errand-card" @click="selectService(110,'带娃煮饭')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg11.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">带娃煮饭</text>
                            </view>
                        </view>
                        <view class="service-card errand-card" @click="selectService(111,'其他家事')">
                            <image :src="IMAGE_URL + '/static/neighobrWorkers/btn_bg12.png'" style="width: 332rpx; height: 160rpx;" class="card-bg"></image>
                            <view class="card-content">
                                <text class="card-text">其他家事</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 接单大厅 -->
            <view v-if="currentTab === 1" class="order-hall-content" :style="{'height':sH + 'px'}">
                <scroll-view 
                    scroll-y 
                    class="order-list"
                    refresher-enabled
                    :refresher-triggered="refresherTriggered"
                    @refresherrefresh="onRefresherRefresh"
                    @scrolltolower="onScrollToLower"
                    :lower-threshold="100"
                    refresher-background="transparent"
                >
                    <view class="order-card" v-for="(order, index) in orderList" :key="index">
                        <view class="order-header">
                            <view class="flex">
                                <text class="order-title">{{ order.title }}</text>
                                <text class="order-time" v-if="order.addresses && order.addresses.length > 1">{{ order.delivery_time_text }}</text>
                            </view>
                            <view class="order-price">
                                ¥
                                <text class="big">
                                    {{
                                        order.order_amount.indexOf('.') !== -1
                                            ? order.order_amount.split('.')[0]
                                            : order.order_amount
                                    }}.
                                </text>
                                {{
                                    order.order_amount.indexOf('.') !== -1
                                        ? order.order_amount.split('.')[1]
                                        : '00'
                                }}
                            </view>
                        </view>
                        <view class="order-route">
                            <view class="route-item pickup" v-if="order.addresses && order.addresses.length > 1">
                                <view class="route-icon">取</view>
                                <text class="route-text">{{ order.addresses.find(item => item.type === 1) ? (order.addresses.find(item => item.type === 1).title + order.addresses.find(item => item.type === 1).address) : '取货地址' }}</text>
                            </view>
                            <view class="route-line" v-if="order.addresses && order.addresses.length > 1"></view>
                            <view class="route-item delivery" v-if="order.addresses && order.addresses.length > 1">
                                <view class="route-icon">收</view>
                                <text class="route-text">{{ order.addresses.find(item => item.type === 2) ? (order.addresses.find(item => item.type === 2).title + order.addresses.find(item => item.type === 2).address) : '收货地址' }}</text>
                            </view>
                            <view class="route-item" v-if="order.addresses && order.addresses.length === 1">
                                <u-icon name="clock" color="#000" size="28rpx"></u-icon>
                                <text class="order-time">{{ order.delivery_time_text }}</text>
                            </view>
                            <view class="route-item single" v-if="order.addresses && order.addresses.length === 1">
                                <u-icon name="map" color="#000" size="28rpx"></u-icon>
                                <text class="route-text">{{ order.addresses[0].title + order.addresses[0].address }}</text>
                            </view>
                        </view>
                        <view class="order-action">
                            <view class="grab-btn" @click="grabOrder(order)">抢单</view>
                        </view>
                    </view>
                    
                    <!-- 加载状态 -->
                    <view class="load-status" v-if="loading">
                        <u-loading-icon mode="circle" size="24"></u-loading-icon>
                        <text class="load-text">加载中...</text>
                    </view>
                    
                    <!-- 加载完成提示 -->
                    <view class="load-complete" v-if="!loading && hasMore === false && orderList.length > 0">
                        <text class="complete-text">已经加载全部</text>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import { getNeighborList, getNeighborCategories } from '@/api/index.js';
import appConfig from '@/config/app.js'

export default {
    components: {
        headerVue
    },
    data() {
        return {
            currentTab: 0,
            sliderOffset: 0,
            sH:0,
            refresherTriggered: false,
            loading: false,
            hasMore: true,
            page: 1,
            pageSize: 10,
            orderList: [],
            categories: [],
            IMAGE_URL: appConfig.IMAGE_URL
        }
    },
    mounted() {
        this.getNeighborCategories();
        this.getNeighborList();
    },
    methods: {
        async getNeighborCategories() {
            const res = await getNeighborCategories();
            if (res && res.errno === 0) {
                this.categories = res.data;
				console.log( this.categories)
            }
        },
        async getNeighborList() {
            if (this.loading) return;
            this.loading = true;
            try {
                const res = await getNeighborList({
                    page: this.page,
                    pageSize: this.pageSize
                });
                if (res && res.errno === 0) {
                    const list = Array.isArray(res.data?.list) ? res.data.list : [];
                    if (this.page === 1) {
                        this.orderList = list;
                    } else {
                        this.orderList = this.orderList.concat(list);
                    }
                    this.hasMore = list.length >= this.pageSize;
                } else {
                    // 接口异常时，避免死循环加载
                    this.hasMore = false;
                }
            } catch (e) {
                // 请求失败也重置状态
                this.hasMore = false;
            } finally {
                this.loading = false;
                if (this.refresherTriggered) this.refresherTriggered = false;
            }
        },
        switchTab(index) {
            this.currentTab = index;
            if (index == 1) {
                // 在节点渲染完成后再测量，兼容App端
                this.$nextTick(() => {
                    const q = uni.createSelectorQuery().in(this)
                    q.select('.boxH').boundingClientRect()
                    q.select('.headerH').boundingClientRect()
                    q.select('.navH').boundingClientRect()
                    q.exec(rects => {
                        if (!rects || rects.length < 3) return
                        const boxRect = rects[0]
                        const headerRect = rects[1]
                        const navRect = rects[2]
                        
                        if (!boxRect || !headerRect || !navRect) return
                        
                        const boxHeight = boxRect.height
                        const headerHeight = headerRect.height
                        const navHeight = navRect.height
                        
                        // 计算可用高度：总高度 - 头部高度 - 导航高度 - 一些边距
                        const availableHeight = boxHeight - headerHeight - navHeight - uni.upx2px(42) // 减少边距
                        this.sH = availableHeight > 0 ? availableHeight : 500
                    })
                })
            }
        },
		//this.categories 数据
		//type =1  取快递，取外卖, type =2 代买商品 ， type =3 代送 ，type =4 代办 
		//101 取外卖 。102 取快递。 103 代买商品。104 代送。 105宠物照看。 106 干洗衣服， 107 快修。108陪作业。109家教。110带娃. 111其他家事。  其他没有。
        selectService(type, title) {
            let id = this.categories.find(category => category.name === type)?.children?.find(child => child.name === title)?.id
			console.log('代办ID',id)
			console.log(type,title)
			console.log(this.categories)
				
            uni.navigateTo({
                url: `/views/neighobr/publish?service=${type}&title=${title}`
            });
        },
        grabOrder(order) {
            console.log('抢单:', order);
            let content = '';
            // #ifndef MP
            content = '即将打开“雄安小管家师傅端”APP';
            // #endif
            // #ifdef MP
            content = '即将打开“雄安小管家师傅端”小程序';
            // #endif
            uni.showModal({
                title: '提示',
                content,
                showCancel: true,
                cancelText: '取消',
                confirmText: '允许',
                success: (res) => {
                    if (res.confirm) {
                        // 用户点击了允许
                        // #ifndef MP
                        // App端跳转逻辑
                        plus.runtime.openURL('xiaoan://neighbor');
                        // #endif
                        // #ifdef MP
                        // 小程序端跳转逻辑
                        uni.navigateToMiniProgram({
                            appId: 'wxa65afe52ad046f9a', // 替换为实际的小程序AppID
                            path: '/pages/neighbor/index',
                            success: () => {
                                console.log('跳转小程序成功');
                            },
                            fail: (err) => {
                                console.log('跳转小程序失败:', err);
                                uni.showToast({
                                    title: '跳转失败',
                                    icon: 'none'
                                });
                            }
                        });
                        // #endif
                    }
                }
            });
        },
        // 下拉刷新
        onRefresherRefresh() {
            if (this.refresherTriggered) return;
            this.refresherTriggered = true;
            this.page = 1;
            this.hasMore = true;
            this.getNeighborList();
        },
        // 触底加载更多
        onScrollToLower() {
            if (this.loading || !this.hasMore) return;
            this.page++;
            this.getNeighborList();
        }
    }
}
</script>
<style lang="scss" scoped>
.lg-con {
    width: 100%;
    height: 100%;
    background: linear-gradient( 180deg, #B5CFFF 0%, rgba(246,249,255,0.2) 30%, #F6F9FF 100%);
}

/* 导航栏 */
.nav-container {
    width: 620rpx;
    height: 84rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    margin: 0 auto;
}

.nav-bg {
    position: relative;
    display: flex;
    background: #FFFFFF;
    border-radius: 60rpx;
    padding: 8rpx;
    box-sizing: border-box;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    &.lr {
        .nav-slider {
            transform: translateX(100%);
        }
    }
}

.nav-slider {
    position: absolute;
    top: 8rpx;
    left: 8rpx;
    width: calc(50% - 8rpx);
    height: calc(100% - 16rpx);
    background: #0785CF;
    border-radius: 52rpx;
    transition: transform 0.3s ease;
    z-index: 1;
}

.nav-item {
    flex: 1;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #666;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    font-weight: bold;
}

.nav-item.active {
    color: #FFFFFF;
}

/* 消息栏 */
.news-bar {
    width: 686rpx;
    height: 80rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(7,133,207,0.1);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin: 42rpx 32rpx 32rpx;
    padding: 6rpx;
    box-sizing: border-box;
}

.news-content {
    display: flex;
    align-items: center;
    border-radius: 16rpx;
    height: 100%;
    background: linear-gradient( 180deg, #D0E1FF 0%, #E2ECFF 100%);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    padding-left: 20rpx;
    box-sizing: border-box;
}

.news-text {
    margin-left: 16rpx;
    font-size: 24rpx;
    color: #333;
}

/* 内容区域 */
.content-container {
    flex: 1;
}

/* 邻工发布 */
.publish-content {
    padding: 0 32rpx 40rpx;
}

.category-section {
    margin-bottom: 40rpx;
}

.category-title {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
}

.title-bar {
    width: 8rpx;
    height: 32rpx;
    background: #0785CF;
    border-radius: 4rpx;
    margin-right: 16rpx;
}

.title-text {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
}

.service-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.service-card {
    position: relative;
    width: 332rpx;
    height: 160rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-right: 32rpx;
    box-sizing: border-box;
    text-align: right;
}

.card-text {
    font-size: 36rpx;
    color: #222222;
    font-weight: 600;
}

/* 接单大厅 */
.order-hall-content {
    margin-top: 42rpx;
}

.order-list {
    height: 100%;
}

.order-card {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 24rpx 28rpx;
    margin: 0 32rpx;
    margin-bottom: 20rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
}

.order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .flex {
        align-items: baseline;
    }
}

.order-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
}

.order-time {
    font-size: 24rpx;
    color: #666;
    margin-left: 12rpx  ;
}

.order-price {
    font-size: 28rpx;
    color: #FF4444;
    font-weight: 600;

    .big {
        font-size: 32rpx;
    }
}

.order-route {
    margin-bottom: 24rpx;
}

.route-item {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
}

.route-item:last-child {
    margin-bottom: 0;
}

.route-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #DF9824;
    color: #FFFFFF;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.route-text {
    font-size: 28rpx;
    color: #333;
    flex: 1;
    margin-left: 12rpx;
}

.route-line {
    width: 2rpx;
    height: 38rpx;
    background: #E0E0E0;
    margin-left: 30rpx;
    margin-bottom: 12rpx;
}

.order-action {
    width: 100%;
}

.grab-btn {
    width: 100%;
    height: 76rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    border-radius: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #FFFFFF;
    font-weight: 600;
}

/* 加载状态 */
.load-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
}

.load-text {
    margin-left: 16rpx;
    font-size: 26rpx;
    color: #999999;
}

/* 加载完成 */
.load-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
}

.complete-text {
    font-size: 26rpx;
    color: #CCCCCC;
}
</style>